<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="common-header">

<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>TurTech</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet"
	th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<link rel="stylesheet"
	th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">


<!-- Custom styles -->
<link th:href="@{/css/styles.css}" rel="stylesheet" type="text/css">
<link rel="icon" th:href="@{/favicon.png}" />

</head>

<body>

	<!-- Navigation -->
	<nav th:fragment="common-navbar"
		class="navbar navbar-expand-md navbar-dark bg-dark">
		<div class="container">
			<a class="navbar-brand" th:href="@{/}"> <img
				class="img-responsive" th:src="@{/images/logo_bigger.png}"
				height="50" width="150" /></a>
			<button class="navbar-toggler" type="button" data-toggle="collapse"
				data-target="#navbar" aria-controls="navbar" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<!-- Navigation -->
			<div class="collapse navbar-collapse justify-content-end" id="navbar">
				<ul class="navbar-nav">
					<li class="nav-item"><a class="nav-link" th:href="@{/}"
						th:classappend="${activeHome}? 'active'">HOME</a></li>
					<li class="nav-item"><a class="nav-link"
						th:href="@{/products}"
						th:classappend="${activeProducts}? 'active'">PRODUCTS</a></li>
					<li class="nav-item"><a class="nav-link" th:href="@{/contact}"
						th:classappend="${activeContact}? 'active'">CONTACT</a></li>
					<li class="nav-item"><a class="nav-link" th:href="@{/faq}"
						th:classappend="${activeFaq}? 'active'">FAQ</a></li>
					<li class="nav-item"><a class="nav-link" th:href="@{/about}"
						th:classappend="${activeAbout}? 'active'">ABOUT</a></li>
				</ul>

				<!-- Navbar Search -->
				<form class="form-inline ml-2 my-2" th:action="@{/searchProduct}"
					method="post">
					<div class="input-group input-group-sm">
						<input type="text" name="keyword" class="form-control"
							aria-label="Search" aria-describedby="inputGroup-sizing-sm"
							placeholder="Search for...">
						<div class="input-group-append">
							<button type="submit" class="btn btn-secondary btn-number">
								<i class="fa fa-search"></i>
							</button>
						</div>
					</div>
				</form>

				<!-- Shopping cart -->
				<a class="btn btn-success btn-sm ml-2"
					th:href="@{/shoppingCart/cart}"> <i
					class="fa fa-shopping-cart fa-fw"></i> Cart <span
					class="badge badge-light"
					th:if="${#httpServletRequest.getUserPrincipal()!=null}"></span>
				</a>

				<!-- User Account -->
				<div class="btn-group open ml-2">
					<a class="btn btn-primary btn-sm" th:href="@{/myAccount}"><i
						class="fa fa-user-circle fa-fw"></i> Welcome, <span
						th:if="${#httpServletRequest.getUserPrincipal()!=null}"
						th:text="${#httpServletRequest.getRemoteUser()}"></span> <span
						th:if="${#httpServletRequest.getUserPrincipal()==null}"
						th:text="guest"></span></a> <a
						class="btn btn-primary btn-sm dropdown-toggle"
						data-toggle="dropdown" href="#"> </a>
					<ul class="dropdown-menu">
						<li th:if="${#httpServletRequest.getUserPrincipal()==null}"
							class="dropdown-item">
							<a th:href="@{/signIn}"><i class="fa fa-sign-in fa-fw"></i> Sign in</a>
						</li>
						<li th:if="${#httpServletRequest.getUserPrincipal()==null}"
							class="dropdown-divider"></li>
						<li th:if="${#httpServletRequest.getUserPrincipal()==null}"
							class="dropdown-item">
							<a th:href="@{/signUp}"><i class="fa fa-user-plus fa-fw"></i> Create new user</a>
						</li>
						<li th:if="${#httpServletRequest.getUserPrincipal()!=null}"
							class="dropdown-item">
							<a th:href="@{/myAccount}"><i class="fa fa-address-card-o fa-fw"></i> My Account</a>
						</li>
						<li th:if="${#httpServletRequest.getUserPrincipal()!=null}"
							class="dropdown-divider"></li>
						<li th:if="${#httpServletRequest.getUserPrincipal()!=null}"
							class="dropdown-item">
							<a th:href="@{/logout}"
							   data-toggle="modal"
							   data-target="#logout">
								<i class="fa fa-sign-out"></i> Sign out</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	<!-- Page Content goes here -->

	<!-- Footer -->
	<footer th:fragment="common-footer" class="text-light">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-lg-4 col-xl-3">
					<h5>ABOUT</h5>
					<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
					<p class="mb-0">Just another SMOKIN' SICK STYLISH store of
						Electronics.</p>
				</div>

				<div class="col-md-2 col-lg-2 col-xl-2 mx-auto">
					<h5>INFORMATION</h5>
					<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
					<ul class="list-unstyled">
						<li><a th:href="@{/myAccount}">Your Account</a></li>
						<li><a th:href="@{/about#terms}">Terms &#38; Conditions</a></li>
						<li><a th:href="@{/about#privacy}">Privacy Policy</a></li>
						<li><a th:href="@{/faq}">Frequently Ask Questions</a></li>
					</ul>
				</div>

				<div class="col-md-3 col-lg-2 col-xl-2 mx-auto">
					<h5>STORE HOURS</h5>
					<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
					<ul class="list-unstyled">
						<li>Monday - Saturday:</li>
						<li>9:00 - 23:00</li>
						<li>Sunday:</li>
						<li>10:00 - 22:00</li>
					</ul>
				</div>

				<div class="col-md-4 col-lg-3 col-xl-3">
					<h5>CONTACT</h5>
					<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
					<ul class="list-unstyled">
						<li><i class="fa fa-home mr-2 fa-fw"></i>Kiev, Ukraine</li>
						<li><i class="fa fa-envelope mr-2 fa-fw"></i>turtech@example.com</li>
						<li><i class="fa fa-phone mr-2 fa-fw"></i>+ 038 999 999 98</li>
						<li><i class="fa fa-print mr-2 fa-fw"></i>+ 038 999 999 99</li>
					</ul>
				</div>
			</div>
			<!-- Copyright -->
			<div class="footer-copyright text-center py-3">© 2019
				Copyright: TurTech</div>
		</div>
	</footer>

	<div th:fragment="common-bottom">

		<!-- Logout Modal-->
		<div class="modal fade" id="logout" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Ready to
							Leave?</h5>
						<button class="close" type="button" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">Select "Logout" below if you are
						ready to end your current session.</div>
					<div class="modal-footer">
						<button class="btn btn-secondary" type="button"
							data-dismiss="modal">Cancel</button>
						<a class="btn btn-primary" th:href="@{/logout}">Logout</a>
					</div>
				</div>
			</div>
		</div>

		<!-- Bootstrap core JavaScript-->
		<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
		<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

		<!-- Custom scripts for all pages-->
		<script>
			/*<![CDATA[*/
			var registerActive = /*[[${registerActive}]]*/"didnt work";
			/*]]*/
			console.log(registerActive);
		</script>
		<script type="text/javascript" th:src="@{/js/scripts.js}"></script>
	</div>
</body>
</html>